<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>

    <style>
        * {
            margin: auto;
            padding: 0
        }

        #ct {
            overflow: auto;
            word-break: break-all;
            text-overflow: ellipsi;
        }

        a {
            text-decoration: none;
            color: white;
            font-size: 14px;
        }

      #inf{
        width:95%;
        min-height: 60vh;
        margin:20px auto;
        border-radius:6px;
        border:1px solid #20B2AA;
      }

      #inf>p.title{
        margin-left:10px;
        margin-top:10px;
        color:#555;
        font-weight: bold;
      }

      #tm{
        text-indent: 1rem;
        margin-left:10px;
        color: #666;
        font-size: 0.9rem;

      }
      #ct{
        text-indent:1rem;
        min-height:10rem;
        color: #666;
        font-size: 0.9rem;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 10px;
        margin: 0 10px;
      }
      #active{
        padding-top: 30px;
        height: 60px;
      }
      #inf div.btn{
         width:66px;
         border-radius:3px;
         height:26px;
         font-size:14px;
         line-height:26px;
         text-align:center;
         background-color:red;
         margin: 20px 20px;
       }
       .pull-left{
         float: left;
       }
       .pull-right{
         float: right;
       }
       #show{
         display: block;
       }
       #hide{
         display: none;
       }
       #dataLength{
         display: block;
         text-align: right;
         margin-right: 10px;
         color: #666;
         font-size: 0.95rem;
       }
    </style>
</head>

<body style="background-color:white;">
    <div id="inf">

        <p class="title">内容:</p>
        <div id="ct" contenteditable="true"></div>
        <div id="dataLength">200/200</div>
        <p class="title tip">提醒时间:</p>
        <p id="tm"></p>

        <div id="active">
          <div class="btn pull-left" id="hide">
              <a href="javascript:void(0)" onclick="keep()">保存</a>
          </div>
          <div class="btn pull-right">
            <a href="javascript:void(0)" onclick="del()">删除</a>
          </div>
        </div>
  </div>

</body>
<script type="text/javascript" src="../script/properties.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script>
//时间转换
Date.prototype.format = function(format) {
    var date = {
        "MM+": this.getMonth() + 1,
        "dd+": this.getDate(),
        "hh+": this.getHours(),
        "mm+": this.getMinutes(),
        "ss+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S+": this.getMilliseconds()
    };
    if (/(y+)/i.test(format)) {
        format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (var k in date) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
                date[k] : ("00" + date[k]).substr(("" + date[k]).length));
        }
    }
    return format;
};
</script>
<script type="text/javascript">

$("#ct").focus(function () {
  window.onkeyup=function () {
      $("#hide").attr("id","show");
      var val = $("#ct").text();
      checkLength(val,200);

  }
})

    apiready = function(){
      var id = api.pageParam.id;
        api.parseTapmode();
        $.ajax({
            type:"post",
            url: URL+'edit/getMemoById',
            dataType:"json",
            data:{"id":id},
            success:function(data){
                var result = eval("(" + data + ")");
                  var userData = result.map.msg;
                  $("#ct").text(userData)
                  checkLength(userData,200)

                  if(result.map.remind==null||result.map.remind==""){
                    $("#inf .tip").hide();
                    // document.getElementById("tm").innerText="没有设置提醒";
                  }else{
                    $("#inf .tip").show();
                  var date = new Date(Date.parse(result.map.remind)).format("yyyy/MM/dd hh:mm:ss");
                  document.getElementById("tm").innerText=date;
                }
            },
            error:function(){
              alert("error");
            }
        });
    };
</script>
<script>
  function keep(){
        var cont = $("#ct").text();
        var len = getStringLen(cont);
        if(len>=200){
          api.alert({
              title: '提示',
              msg: '备忘录的内容超过规定长度',
          }, function(ret, err){
          });

        }else{
              saveData();
        }
    }


    var saveData = function () {
      var cont = $("#ct").text();
      $.ajax({
        type:"post",
        url:URL+"edit/keep",
        dataType:"json",
        data:{"content":cont,"id":api.pageParam.id},
        success:function(data){
          result = eval("("+data+")");
          if(result.map=="更改成功"){
          api.alert({
              title: '提示',
              msg: '保存成功',
          }, function(ret, err){
              $("#show").attr("id","hide");
          });
          api.execScript({
              name: 'memo_win',
              frameName: 'memo_frm',
              script: 'location.reload(true);'
          });
          }
        },
        error:function(){
          alert("网络错误，请重试");
        }
      })
    }

</script>
<script>

//字符统计
function  getStringLen(Str){
    var   i,len,code;
    if(Str==null || Str == "" ||Str == " "||Str == "  "  )   return   0;
    len   =   Str.length;
    for   (i   =   0;i   <   Str.length;i++)
    {
        code   =   Str.charCodeAt(i);
        if   (code   >   255) {len ++;}
    }
    return   len;
}


function checkLength(value,length){
    var len = getStringLen(value);
    var numberLength=document.getElementById('dataLength');
    numberLength.innerText=(len)+'/'+(length);
}



function del(){
  api.confirm({
      title: '',
      msg: '确定删除？',
      buttons: ['确定', '取消']
  }, function(ret, err){
      if( ret.buttonIndex==1 ){
        sure();
      }
  });
  function sure(){
  $.ajax({
      type:"post",
      url:URL+"edit/removeMemo",
      dataType:"json",
      data:api.pageParam,
      jsonp:"callback",
      success:function(data){
          var result = eval("(" + data + ")");

            api.closeWin({

            });

            api.execScript({
                name: 'memo_win',
                frameName: 'memo_frm',
                script: 'location.reload(true);'
            });

      },
      error:function(){
        alert("error");
      }
  });
}
  }
</script>

</html>
